<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>07_事件处理</title>
  </head>
  <body>
    <!--
1. 绑定监听:
  v-on:xxx="fun"
  @xxx="fun"
  @xxx="fun(参数)"
  默认事件形参: event
  隐含属性对象: $event
2. 事件修饰符:
  .prevent : 阻止事件的默认行为 event.preventDefault()
  .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
  .keycode : 操作的是某个keycode值的健
  .enter : 操作的是enter键
-->

    <div id="example">
      <h2>1. 绑定监听</h2>
      <!-- 回调函数的参数：event -->
      <button @click="handleClick1">按钮</button>
      <!-- 回调函数的参数：1, 2, 3 -->
      <button @click="handleClick2(1, 2, 3)">按钮</button>
      <!-- 回调函数的参数：1, 2, 3, event -->
      <button @click="handleClick3(1, 2, 3, $event)">按钮</button>
      <!-- 如果回调函数只有一条语句可以直接写，不用定义函数 -->
      <p>{{count}}</p>
      <button @click="count++">update</button>
      <h2>2. 事件修饰符</h2>
      <!-- https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6 -->
      <a href="http://www.atguigu.com" @click="handleClick4">尚硅谷</a>
      <a href="http://www.atguigu.com" @click.prevent="handleClick5">尚硅谷</a>
      <a href="http://www.atguigu.com" @click.prevent>尚硅谷</a>
      <div
        style="height: 100px; background-color: yellowgreen"
        @click="handleClick6"
      >
        <div @click.stop>1111</div>
      </div>
      <h2>3. 按键修饰符</h2>
      <input type="text" @keyup="handleKeyup1" />
      <input type="text" @keyup.13="handleKeyup2" />
      <input type="text" @keyup.enter="handleKeyup2" />
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: "#example",
        data: {
          count: 0,
        },
        methods: {
          handleClick1(event) {
            console.log(111);
          },
          handleClick2(...args) {
            console.log(args);
          },
          handleClick3(...args) {
            console.log(args);
          },
          handleClick4(e) {
            e.preventDefault();
          },
          handleClick5() {},
          handleClick6() {
            console.log(111);
          },
          handleKeyup1(e) {
            if (e.keyCode === 13) {
              console.log("enter");
            }
          },
          handleKeyup2(e) {
            console.log("enter");
          },
        },
      });
    </script>
  </body>
</html>
